<!--  -->
<template>
  <div v-loading="isLoading" element-loading-text="加载中...">
    <el-container>
      <el-header height="300px">
        <div class="wrap">
          <div class="img">
            <img :src="playList.blurPicUrl" alt="" />
          </div>
          <div class="title">
            <div class="head-name">
              <div class="name">{{ playList.name }}</div>
            </div>
            <!-- 作者信息 -->
            <div class="creator">
              <!-- 作者名 -->
              <!-- <span> Playlist by {{ creator.nickname }} </span> -->
              <!-- 创建时间 -->
              <div>歌单于 {{ playList.publishTime | dateFormats }} 创建</div>
            </div>
            <div class="intro">
              <div>
                {{ playList.description }}
              </div>
            </div>
            <div class="button">
              <el-button
                @click="allPlays"
                type="primary"
                class="iconfont icon-24gf-play play"
              >
                播放</el-button
              >
              <el-button
                class="iconfont icon-shoucang2 shoucang"
                :disabled="loginStatus !== 'true'"
                v-if="!albumInfo.isSub"
                @click="subscribe(1, playList.id)"
              >
              </el-button>
              <el-button
                @click="Nsubscribe(2, playList.id)"
                v-else
                class="iconfont icon-shoucang1 shoucang"
              >
              </el-button>
            </div>
          </div>
        </div>
      </el-header>

      <el-main>
        <div class="menu_tab">
          <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
            <el-menu-item @click="isShow = true" index="1"
              >歌曲列表</el-menu-item
            >
            <el-menu-item @click="isShow = false" index="2"
              >评论({{ albumInfo.commentCount }})</el-menu-item
            >
          </el-menu>
        </div>

        <div class="musicList" v-if="isShow">
          <div class="list_wrap">
            <div class="item_wrap">
              <div
                @dblclick="getMusicUrl(item)"
                v-for="(item, index) in songs"
                :key="index"
                class="item"
              >
                <div class="cover">
                  <img :src="item.al.picUrl" alt="" />
                </div>
                <div class="info">
                  <div
                    :class="{ active_position: item.id === songId }"
                    class="name"
                  >
                    {{ item.name }}
                  </div>
                  <div class="creator_name">{{ item.ar[0].name }}</div>
                </div>
                <div class="album">{{ item.al.name }}</div>
                <div class="timer">
                  {{ Math.floor(item.dt / 1000) | timeFormat }}
                </div>
                <div class="btn">
                  <div
                    @click="handleLike(true, item.id)"
                    v-if="likeList.indexOf(item.id) == -1"
                    class="iconfont icon-xihuan like"
                  ></div>
                  <div
                    v-else
                    @click="handleLike(false, item.id)"
                    class="iconfont icon-xihuan1"
                  ></div>
                  <div
                    @click="download(item.id, item.name)"
                    class="iconfont icon-yunduanxiazai load"
                  ></div>
                </div>
                <div class="mv">
                  <el-button
                    @click="toDetail(item.mv)"
                    size="mini"
                    v-if="item.mv != 0"
                    type="primary"
                    >mv</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="comment-wrap">
          <ul v-if="hotComment.length > 0">
            热门评论:
            <li v-for="(item, index) in hotComment" :key="index">
              <div @click="toUser(item.user.userId)" class="cover">
                <img :src="item.user.avatarUrl" alt="" />
              </div>
              <div class="content">
                <div class="user-name">{{ item.user.nickname }}</div>
                <div class="info">{{ item.content }}</div>
                <div class="footer">
                  <div class="time">{{ item.time | dateFormat }}</div>
                  <div class="button">
                    <el-button
                      :disabled="loginStatus !== 'true'"
                      v-if="!item.liked"
                      @click="getHotCommentLike(item.commentId, 1, index)"
                      icon="iconfont icondianzan"
                      circle
                    >
                      {{ item.likedCount }}</el-button
                    >
                    <el-button
                      :disabled="loginStatus !== 'true'"
                      v-else
                      @click="getHotCommentLike(item.commentId, 0, index)"
                      icon="iconfont iconicon_goodfill active"
                      circle
                    >
                      {{ item.likedCount }}</el-button
                    >
                    <el-button icon="iconfont iconfenxiang" circle></el-button>
                    <el-button icon="iconfont iconpinglun" circle></el-button>
                  </div>
                </div>
              </div>
            </li>
          </ul>

          <ul>
            全部评论:
            <li v-for="(item, index) in allComment" :key="index">
              <div @click="toUser(item.user.userId)" class="cover">
                <img :src="item.user.avatarUrl" alt="" />
              </div>
              <div class="content">
                <div class="user-name">{{ item.user.nickname }}</div>
                <div class="info">{{ item.content }}</div>
                <div class="footer">
                  <div class="time">{{ item.time | dateFormat }}</div>
                  <div class="button">
                    <el-button
                      :disabled="loginStatus !== 'true'"
                      v-if="!item.liked"
                      @click="getCommentLike(item.commentId, 1, index)"
                      icon="iconfont icondianzan"
                      circle
                    >
                      {{ item.likedCount }}</el-button
                    >
                    <el-button
                      :disabled="loginStatus !== 'true'"
                      v-else
                      @click="getCommentLike(item.commentId, 0, index)"
                      icon="iconfont iconicon_goodfill active"
                      circle
                    >
                      {{ item.likedCount }}</el-button
                    >
                    <el-button icon="iconfont iconfenxiang" circle></el-button>
                    <el-button icon="iconfont iconpinglun" circle></el-button>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import axios from "axios";
import { getDownloadUrl } from "util/music.js";

import {
  getAlbumSubscribe,
  getAlbumDetail,
  getAlbumInfo,
  getAlbumComment,
} from "util/findMusic.js";
import {
  getCommentLike,
  getLikeMusic,
  getLikeMusicList,
} from "util/songListPage";

export default {
  name: "",
  data() {
    return {
      singerName: "",
      currentId: null,
      playList: {},
      albumInfo: {},
      songs: [],
      isShow: true,
      allComment: "",
      hotComment: "",
      isLike: false,
      likeList: [],
    };
  },
  computed: {
    ...mapGetters("musicPlay", [
      // 加载状态
      "isLoading",
    ]),
    // ...mapState("musicPlay", ["hasPlayList"]),
    ...mapGetters("musicPlay", [
      //当前播放歌曲id
      "songId",
      //是否在播放
      "isPlaying",
      "hasPlayList",
    ]),
    ...mapGetters("userInfo", ["loginStatus"]),
  },
  watch: {
    songId(newValue, oldValue) {
      this.$store.dispatch("musicPlay/saveHasPlayList", newValue);
    },
    isLike(newVal) {
      // console.log(newVal);
      this.getLikeList();
    },
  },
  created() {
    this.currentId = this.$route.params.id;
    this.getAlbumDetail();
    this.getAlbumComment();
    this.getAlbumInfo();
    if (this.loginStatus == "true") {
      this.getLikeList();
    }
  },
  methods: {
    async getAlbumDetail() {
      this.$store.dispatch("musicPlay/changeIsLoading", true);

      let { data } = await getAlbumDetail(this.currentId);
      // console.log(data)
      this.playList = data.album;
      this.singerName = this.playList.artist.name;
      this.songs = data.songs;
      // console.log(this.playList);
    },
    share() {
      this.$message("此功能后续开发中，敬请期待哦");
    },
    //获取专辑评论数等信息
    async getAlbumInfo() {
      let { data } = await getAlbumInfo(this.currentId);
      this.albumInfo = data;
      // console.log(data);
    },

    //获取歌曲播放链接
    async getMusicUrl(musicDetail) {
      this.$store.dispatch("musicPlay/saveIsPlaying", true);

      //保存当前歌曲id
      this.$store.dispatch("musicPlay/saveSongId", musicDetail.id);
      sessionStorage.setItem("songId", musicDetail.id);
    },
    //获取喜欢音乐列表
    async getLikeList() {
      let { data } = await getLikeMusicList(this.userId);
      // console.log(data);
      this.likeList = data.ids;
    },
    //喜欢音乐
    async handleLike(type, id) {
      let { data } = await getLikeMusic(id, type);
      if (!data.code) {
        this.$message.success("请勿重复添加哦!");
      }
      // console.log(data);
      if (data.code == 200 && type == true) {
        this.$message.success("已添加到我喜欢的音乐");
        this.isLike = true;
      } else {
        this.$message("取消喜欢成功");
        this.isLike = false;
      }
    },

    //获取专辑评论
    async getAlbumComment() {
      let { data } = await getAlbumComment(this.currentId, 100);
      // console.log(data);
      this.hotComment = data.hotComments;
      this.allComment = data.comments;
      this.$store.dispatch("musicPlay/changeIsLoading", false);
    },
    //点击收藏/ 取消收藏
    async subscribe(type, id) {
      let { data } = await getAlbumSubscribe(type, id);
      if (data.code == "200" && type == 1) {
        this.$message("收藏成功");
        this.albumInfo.isSub = true;
      } else {
        this.$message("取消收藏成功");
        this.albumInfo.isSub = false;
      }
    },
    //全部评论点赞
    async getCommentLike(cid, type, index) {
      let { data } = await getCommentLike(this.$route.params.id, cid, type, 2);
      if (data.code == "200" && type === 1) {
        this.allComment[index].liked = true;
        this.allComment[index].likedCount += 1;
      } else {
        this.allComment[index].liked = false;
        this.allComment[index].likedCount -= 1;
      }
    },
    //热门评论点赞
    async getHotCommentLike(cid, type, index) {
      let { data } = await getCommentLike(this.$route.params.id, cid, type, 3);
      if (data.code == "200" && type === 1) {
        this.hotComment[index].liked = true;
        this.hotComment[index].likedCount += 1;
      } else {
        this.hotComment[index].liked = false;
        this.hotComment[index].likedCount -= 1;
      }
    },
    //全部播放
    allPlays() {
      this.$store.dispatch("musicPlay/saveSongId", this.songs[0].id);
    },
    toUser(id) {
      this.$router.push("/userInfo/" + id);
    },
    //下载1歌曲
    async download(id, name) {
      let {
        data: { data },
      } = await getDownloadUrl(id);
      // console.log(data)
      if (data.url) {
        const fileName = name; // 导出文件名
        axios({
          url: data.url,
          responseType: "blob",
          headers: { "content-type": "audio/mpeg" },
        }).then((res) => {
          // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
          // IE10以上支持blob但是依然不支持download
          const blob = new Blob([res.data], { type: res.data.type });
          if ("download" in document.createElement("a")) {
            // 支持a标签download的浏览器
            const link = document.createElement("a"); // 创建a标签
            link.download = fileName; // a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); // 执行下载
            URL.revokeObjectURL(link.href); // 释放url
          }
        });
      } else {
        this.$message("开通会员后可下载");
      }
    },
    //跳转至视频
    toDetail(id) {
      this.$store.dispatch("musicPlay/saveIsPlaying", false);

      this.$router.push("/mvDetail/" + id);
    },
  },
};
</script>

<style scoped lang='less'>
.el-header {
  margin-top: 20px;
  padding: 0 5.25rem;
  .wrap {
    padding: 0 15px;
    display: flex;
    height: 100%;
    .img img {
      width: 280px;
      height: 280px;
      /* height: 100%; */
      border-radius: 10px;
      box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.12),
        0 0 6px rgba(0, 0, 0, 0.04);
    }
    .title {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 40px;
      .name {
        display: inline-block;
        font-weight: 600;
        font-size: 35px;
      }
      .creator {
        span {
          font-size: 17px;
        }
        div {
          margin-top: 5px;
          font-size: 14px;
          color: rgb(121, 118, 118);
        }
      }
      .intro {
        div {
          text-align: justify;
          text-justify: inter-ideograph;
          font-size: 15px;
          height: 60px;
          color: rgb(121, 118, 118);
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
      }
      .button {
        display: flex;
        .play {
          background-color: #eaeffd;
          border: none;
          color: #335eea;
          font-size: 17px;
          font-weight: 600;
        }
        .play:hover {
          transform: scale(1.1);
        }
        .shoucang:hover {
          transform: scale(1.1);
        }
        .shoucang {
          background-color: rgb(224, 219, 219);
          border: none;
          width: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: #333;
        }
      }
    }
  }
}
.menu_tab {
  padding: 0 5.25rem;
  margin: 20px 0;
}
.el-menu-demo {
  // width: 100%;
  border-radius: 5px;
  width: 220px;
  display: flex;
  justify-content: space-evenly;
  /deep/.el-menu-item {
    flex: 1;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    border-bottom: none;
    border-radius: 5px;
    color: rgb(83, 81, 81);
    font-size: 17px;
    font-weight: 600;
  }
  /deep/.el-menu-item:hover {
    background-color: rgba(184, 178, 178, 0.918);
    color: #fff;
  }
  /deep/.el-menu-item:focus,
  /deep/.el-menu-item.is-active {
    border-bottom: none;
    background-color: #f6f6f8;
  }
}
.musicList {
  padding: 0 5.25rem;
  .list_wrap {
    // width: 80%;
    .item_wrap {
      .item {
        background-color: #fff;
        height: 40px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        border-radius: 10px;
        .cover {
          margin: 0 10px;
          width: 45px;
          height: 45px;
          border-radius: 5px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 0.1);
          }
        }
        .info {
          margin-left: 10px;
          width: 30%;
          .name {
            width: 100%;
            font-weight: 600;
            font-size: 17px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .creator_name {
            color: #525252;
            font-size: 13px;
          }
          .active_position {
            color: #335eea;
          }
        }
        .album {
          color: #525252;
          width: 30%;
          font-size: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .timer {
          margin-left: 5px;
          color: #525252;
          font-size: 15px;
        }
        .btn {
          width: 20%;
          display: flex;
          align-items: center;
          justify-content: center;
          div {
            display: none;
            margin-left: 20px;
          }
          div:hover {
            transform: scale(1.1);
          }
          .like {
            font-size: 23px;
          }
        }
        .mv {
          width: 8%;
          text-align: right;
          margin-right: 10px;
          &:hover .el-button {
            transform: scale(1.1);
          }
          .el-button {
            background-color: #fff;
            color: rgb(16, 24, 134);
            font-weight: 600;
            border: none;
            border-radius: 5px;
          }
        }
      }
      .item:hover {
        background-color: #f6f6f8;
      }
      .item:hover .btn div {
        display: block;
      }
    }
  }
}
.comment-wrap {
  padding: 0 5.25rem;
}
.comment-wrap ul li {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
  margin-right: 50px;
}
.comment-wrap .cover {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #eee;
}
.comment-wrap .cover img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.comment-wrap .content {
  margin-left: 10px;
  width: 100%;
}
.comment-wrap .content .user-name {
  color: #44cef6;
  font-size: 13px;
  margin-top: -3px;
  margin-bottom: 7px;
}
.comment-wrap .content .info {
  color: #373737;
  font-size: 12px;
  line-height: 2em;
}
.comment-wrap .content .time {
  margin-top: 5px;
  color: rgb(136, 129, 129);
  font-size: 11px;
}
.footer {
  display: flex;
  justify-content: space-between;
  .time {
  }
  .button {
    .el-button {
      font-size: 10px;
      border: none;
      padding: 0;
      margin-right: 10px;
      .active {
        color: red;
      }
    }
  }
}
</style>